import { RuleTree } from "@alipay/techui-rule-tree";
import { Form, Input } from "antd";

export default function App() {
  return (
    <div>
      {/* 原生h5拖拽不受影响 */}
      <p draggable="true">使用方式和Form.List类似</p>
      <RuleTree<{ name: string; age: number }>
        onChange={console.log}
        defaultValue={{
          relation: "and",
          children: [
            { name: "A" },
            { name: "B" },
            { name: "C" },
            {
              relation: "or",
              children: [{ name: "D" }, { name: "DD" }, { name: "DDD" }],
            },
            { name: "E" },
          ],
        }}
      >
        {(field) => {
          return (
            <>
              <Form.Item
                noStyle
                name={[field.name, "name"]}
                rules={[
                  { required: true },
                  {
                    validator(rule, value) {
                      if (value?.length < 2) {
                        return Promise.reject("长度不应小于2");
                      }
                      return Promise.resolve();
                    },
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </>
          );
        }}
      </RuleTree>
    </div>
  );
}
